<template>
  <div>
    <el-drawer :title="!dataForm.id ? '新增合同' : '合同详情'" :visible.sync="visible" :wrapperClosable="false" size='90%'
      append-to-body v-loading="loading" :before-close="handleClose">

      <div style="margin: 0 0 1rem 1rem;">
        <div class="allNavSty" v-if="dataForm.id">
          <div>合同编号:{{ dataForm.code }}</div>
        </div>
        <div>
          <div class="customStep">
            <div v-for="(item, index) in stepList" :key="item.id" class="allCustomStep">
              <div class="stepRound" @click="toActive(item.status)"
                :class="{
                  blue: item.status <= (dataForm.status == 10 ? 4 : dataForm.status),
                  green: item.status == active,
                  red: dataForm.status == 11
                }">
                {{ item.id }}
              </div>
              <div class="textCustomSty" :class="{activeTextCla: item.status == active }">{{
                  item.name
                }}
              </div>
            </div>
            <div class="stepStriping" />
          </div>
          <!-- 合同附件 -->
          <detailList v-if="active == 4" :dataForm="dataForm" />
          <!-- 委托单位签章 -->
          <customerSignature v-if="active == 5" :dataForm="dataForm" @refreshSignature="refreshSignature"
            @refreshClientRejectAllDio="refreshClientRejectAllDio" />
          <!-- 方案附件 -->
          <schemeAttachment v-if="active == 7" :dataForm="dataForm" @refreshConfirmation="refreshConfirmation"
            @loadingState="loadingState" />
          <!-- 文件归档 -->
          <fileDocument v-if="active == 9" :dataForm="dataForm" @refreshAllDio="refreshAllDio" />
        </div>
      </div>
    </el-drawer>
  </div>

</template>
<script>
import { createContract, getCustomerDetail, getCustomerAllDetail } from "@/api/contract/contractOrg";
import { contractDetail } from "@/api/contract/contractOwn";
import detailList from "./detailList.vue";
import customerSignature from "./customerSignature.vue";
import schemeAttachment from "./schemeAttachment.vue";
import fileDocument from './fileDocument.vue';
export default {
  props: [],
  components: {
    detailList,
    customerSignature,
    schemeAttachment,
    fileDocument,

  },
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,
      terminationProjectVisible: false,
      dataForm: {},
      // 合同的数据
      contractData: {},
      active: 2,
      stepList: [
        { id: 1, name: '合同附件', status: 4 },
        { id: 2, name: '委托单位签章', status: 5 },
        { id: 3, name: '方案附件', status: 7 },
        { id: 4, name: '文件归档', status: 9 }
      ],
      // 文件上传类型 1合同，2发票 3附件
    };
  },
  methods: {
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = false;
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.loading = true;
          contractDetail(id).then(res => {
            this.dataForm = {
              ...res.data, contractId: id
            };
            if (res.data.status == 11) {
              this.active = 4;
            } else {
              this.active = res.data.status;
            }
            this.loading = false;
            this.visible = true;
          });
        }
      });
    },
    next() {
      // if (this.active++ > 8) this.active = 8;
      if (this.active == 1) {
        this.$refs.userInfo.changeOptions()
      } else if (this.active == 2) {
        this.$refs.projectInfo.changeOptions()
      } else if (this.active == 3) {
        this.dataForm.status = this.dataForm.status || 3
        createContract(this.dataForm).then(res => {
          this.active++
        })
      }
    },
    loadingState() {
      this.loading = !this.loading
    },
    prev() {
      if (this.active-- < 1) this.active = 0;
    },
    // 终止项目
    handleTerminationProject() {
      this.terminationProjectVisible = true;
      this.$nextTick(() => {
        this.$refs.terminationProject.init();
      });
    },
    refreshInfo(form) {
      let data = Object.assign({}, form)
      if (data.projectSaveDTO.engineer) {
          if (Array.isArray(data.projectSaveDTO.engineer)) {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
          } else {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
          }
      } else {
          data.projectSaveDTO.engineer = ''
      }
      if (data.projectSaveDTO.operators) {
          if (Array.isArray(data.projectSaveDTO.operators)) {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
          } else {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators
          }
      } else {
          data.projectSaveDTO.operators = ''
      }
      createContract(data).then(res => {
        this.contractData = { listName: from.listName, ...res.data }
        this.active++
      })
    },
    refreshProInfo(form) {
      let data = Object.assign({}, form)
      if (data.projectSaveDTO.engineer) {
          if (Array.isArray(data.projectSaveDTO.engineer)) {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
          } else {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
          }
      } else {
          data.projectSaveDTO.engineer = ''
      }
      if (data.projectSaveDTO.operators) {
          if (Array.isArray(data.projectSaveDTO.operators)) {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
          } else {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators
          }
      } else {
          data.projectSaveDTO.operators = ''
      }
      createContract(data).then(res => {
        this.active++
      })
    },
    // 合同确认提交
    refreshConfirmation(form) {
      let data = Object.assign({}, form)
      if (data.projectSaveDTO.engineer) {
          if (Array.isArray(data.projectSaveDTO.engineer)) {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
          } else {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
          }
      } else {
          data.projectSaveDTO.engineer = ''
      }
      if (data.projectSaveDTO.operators) {
          if (Array.isArray(data.projectSaveDTO.operators)) {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
          } else {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators
          }
      } else {
          data.projectSaveDTO.operators = ''
      }
      createContract(data).then(res => {
        this.active++
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.$emit('refreshAddContract')
          done();
        })
        .catch(_ => { });
    },
    // 提交
    refreshSignature(form) {
      let data = Object.assign({}, form)
      if (data.projectSaveDTO.engineer) {
          if (Array.isArray(data.projectSaveDTO.engineer)) {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
          } else {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
          }
      } else {
          data.projectSaveDTO.engineer = ''
      }
      if (data.projectSaveDTO.operators) {
          if (Array.isArray(data.projectSaveDTO.operators)) {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
          } else {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators
          }
      } else {
          data.projectSaveDTO.operators = ''
      }
      createContract(data).then(res => {
        this.$emit('refreshAddContract')
      })
    },
    // 关闭页面并刷新
    refreshAllDio(form) {
      let data = Object.assign({}, form)
      if (data.projectSaveDTO.engineer) {
          if (Array.isArray(data.projectSaveDTO.engineer)) {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer.join(',')
          } else {
              data.projectSaveDTO.engineer = data.projectSaveDTO.engineer
          }
      } else {
          data.projectSaveDTO.engineer = ''
      }
      if (data.projectSaveDTO.operators) {
          if (Array.isArray(data.projectSaveDTO.operators)) {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators.join(',')
          } else {
              data.projectSaveDTO.operators = data.projectSaveDTO.operators
          }
      } else {
          data.projectSaveDTO.operators = ''
      }
      createContract(data).then(res => {
        this.$emit('refreshAddContract')
      })
    },
    // 刷新页面
    refreshConfirmationLoad() {
      getCustomerDetail(this.dataForm.id).then(res => {
        this.dataForm = {
          ...res.data, contractId: id
        };
        this.active = res.data.status
        this.visible = true;
      });
    },
    refreshClientRejectAllDio() {
      this.$emit('refreshAddContract')
    },
    toActive(id) {
      if (this.dataForm.status >= id) {
        this.active = id
      }
    }

  },
};
</script>
<style lang="scss" scoped>
.allNavSty {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.customStep {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px 20px;
  position: relative;

  .allCustomStep {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .stepRound {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: 1px solid #5a9ef4;
    font-size: 28px;
    text-align: center;
    line-height: 4rem;
    background: #fff;
    color: #5a9ef4;
    cursor: pointer;
    z-index: 1;
  }

  .stepStriping {
    position: absolute;
    left: 100px;
    right: 100px;
    top: 2rem;
    height: 0.2rem;
    background: #5a9ef4;
  }

  .textCustomSty {
    text-align: center;
    font-size: 12px;
    margin-top: 5px;
  }
  .blue {
    color: #fff;
    background: #5a9ef4;
    border: 1px solid #5a9ef4;
  }

  .green {
    color: #fff;
    background: #4EA770;
    border: 1px solid #4EA770;
  }
  
  .red {
    color: #fff;
    background: #E21818 !important;
    border: 1px solid #E21818 !important;
  }

  .activeTextCla {
    color: #5a9ef4;
  }
}

</style>
